<template>
  <div class="dashboard-container" v-loading="contentLoading">
    <div class="news-analysis">
      <h1 class="news-title">
        <span>{{ title }}</span>
        <el-button class="back-button" type="text" @click="back" style="float: right;">返回</el-button>
      </h1>
      <el-divider class="divider"></el-divider>
      <div class="scrollable-container">
        <el-scrollbar class="scrollbar-left">
          <div class="scrollable-content">
            <div class="language-container">
              <div class="language-content zh-content">
                <h2 class="language-title">中文</h2>
                <p class="chinese-text">{{ zh }}</p>
              </div>
            </div>
          </div>
        </el-scrollbar>
        <el-scrollbar class="scrollbar-right">
          <div class="scrollable-content">
            <div class="language-container">
              <div class="language-content jp-content">
                <h2 class="language-title">日本語</h2>
                <p class="japanese-text">{{ jp }}</p>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>

<script>

import router from '@/router'
import { getNewsData } from '@/api/newsList'

export default {
  name: 'NewsContent',
  data() {
    return {
      tabName: '生活',
      zh: '',
      jp: '',
      title: '',
      newsContent: '这是新闻内容',
      contentLoading: false
    }
  },
  mounted() {
    this.getContent()
  },
  methods: {
    getContent(){
      this.contentLoading = true
      getNewsData(this.$route.query.id).then(data => {
        this.zh = this.removeBracketsContent(data.cn)
        this.jp = this.removeBracketsContent(data.jp)
        this.title = data.title
      }).finally(()=>{
        this.contentLoading = false
      })
    },
    back(){
      router.push({
        path: '/news-list/index',
      })
    },
    removeBracketsContent(str) {
      // 使用正则表达式匹配【】之间的内容，并替换为空字符串
      let result = str.replace(/\【.*?\】/g, '')
      // 删除连续的三个换行符
      result = result.replace(/\\n{3}/g, '');
      // 删除连续的两个换行符
      result = result.replace(/\\n{2}/g, '');
      // 删除连续的一个换行符
      result = result.replace(/\\n{1}/g, '');
      return result
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  margin: 15px;
}

.news-analysis {
  margin: 0 auto;
  max-width: 1200px;
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.news-title {
  margin: 20px 0;
  font-size: 24px;
  color: #333;
}

.news-date {
  color: #888;
}

.divider {
  margin-top: 0;
  margin-bottom: 20px;
}

.scrollable-container {
  display: flex;
  height: 600px;
}

.scrollbar-left,
.scrollbar-right {
  flex: 1;
  overflow-y: auto;
  height: 600px;
}

.scrollable-content {
  padding: 10px;
}

.language-container {
  display: flex;
  justify-content: space-between;
}

.language-content {
  width: 100%;
}

.language-title {
  margin: 10px 0;
  font-size: 20px;
  color: #555;
}

.zh-content p,
.jp-content p {
  line-height: 1.5;
}

.japanese-text,
.chinese-text {
  text-indent: 2em;
}
</style>
